<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />

    <title>Web Storage API example</title>

    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Bitter|Ubuntu+Mono"
      rel="stylesheet"
      type="text/css"
    />
    <link rel="stylesheet" href="style.css" />
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="wrapper">
      <h1>本地存储</h1>

      <p>
        This example is designed to demonstrate usage of the
        <a href="http://dev.w3.org/html5/webstorage/">W3C Web Storage API</a>.
        It should work as far back as IE8. Choose custom background colours,
        logos and fonts from the below drop down menus, then try closing and
        reopening the page — you will find that your choices are remembered, as
        they are stored using Web Storage. You can also visit the
        <a href="event.html" target="_blank">storage event output</a> (opens in
        new tab). Open this, change some values in the index page, then look at
        the events page — you'll see the storage changes reported.
      </p>

      <form>
        <div>
          <label for="bgcolor">选择背景颜色:</label>
          <input class="color" id="bgcolor" type="color" />
        </div>
        <div>
          <label for="font">选择字体:</label>
          <select id="font">
            <option value="'Open Sans Condensed', sans-serif" selected>
              Sans-serif
            </option>
            <option value="'Bitter', serif">Serif</option>
            <option value="'Ubuntu Mono'">Monospace</option>
          </select>
        </div>
        <div>
          <label for="image">选择图片:</label>
          <select id="image">
            <option value="images/tortoise.png">Tortoise</option>
            <option value="images/firefoxos.png">Firefox</option>
            <option value="images/crocodile.png">Crocodile</option>
          </select>
        </div>
      </form>

      <footer></footer>
      <img src="images/firefoxos.png" />
    </div>
  </body>
  <script>
    /* 实现功能 */
    function $(selector) {
      return document.querySelector(selector)
    }
    function setConfig() {
      config.bgcolor = bgcolorInput.value
      config.font = fontInput.value
      config.image = imageInput.value
    }
    function render() {
      body.style.backgroundColor = config.bgcolor
      p.style.fontFamily = config.font
      img.src = config.image
      bgcolorInput.value = config.bgcolor
      fontInput.value = config.font
      imageInput.value = config.image
    }
    function handleChange() {
      setConfig()
      render()
      save()
    }
    function save() {
      localStorage.setItem(key, JSON.stringify(config))
    }
    function load() {
      return JSON.parse(localStorage.getItem(key)) || {
        bgcolor: bgcolorInput.value,
        font: fontInput.value,
        image: imageInput.value
      }
    }

    const bgcolorInput = $('#bgcolor')
    const fontInput = $('#font')
    const imageInput = $('#image')
    const body = document.body
    const p = $('.wrapper p')
    const img = $('.wrapper img')

    const key = 'page-setting'
    const config = load() // 配置

    bgcolorInput.onchange =
      fontInput.onchange =
      imageInput.onchange =
        handleChange

    render()
  </script>
</html>
